<%@page pageEncoding="UTF-8" %>
<%@ taglib prefix="c"   uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>数据融合平台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/font.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/xadmin.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/echarts.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
      .x-body{
        width: 100%;
        position: relative;
      }
      .leftbody{
        position: absolute;
        height:700px; 
        overflow:auto; 
        top:70px;
        width:16%;
      }

      .rightbody{
        top: 20px;
        right: 60px;
        position: absolute;
        background: #e0e0e0;
        width: 76%;
        height: 1000px;
        border-radius: 20px 20px 0 0 ;
        bottom:180px; 
      }
      .rightbodybt{
        width: 100%;
        background: #28495a;
        height: 60px;
        border-radius: 20px 20px 0 0 ;
        text-align: center;
        line-height: 60px;
        font-size: 18px;
        font-weight: bold;
        color: #FFF;
      }
      .rightbodybt select{
          margin-top: -8px;
          height: 30px;
          font-weight: normal;
      }
      .chartbody{
        width: 100%;
        float:left;
      }
      .chartbody{
        width: 100%;
      }
      .rone{
        width: 100%;
        float: left;
      }
      .rtwo{
        width: 100%;
        float: left;
      }
      .other{
        height: 1000px;
      }

      .xb{
        height: 40px;
/*         width: 200px; */
        background: #e0e0e0;
        line-height: 40px;
        text-align: center;
        border-width: 1px;
        border-style: solid;
        border-color: #e6e6e6;
      }
      .layui-table th{
        width: 20px;
      }
      .layui-table td{
      	font-size:11px;
      }
      .layui-table{
        margin: 0px 0;
      ｝
    </style>
  </head>
  
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">数据比较</a>
        <a>
          <cite>数据比较</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
      <div class="leftbody">
        <div class="xb">系别</div>
        <table class="layui-table">
          <tbody>
          <c:forEach var="depart" items="${departList}">
            <tr>
              <th>                  
                <input type="checkbox" id="check" name="" style="width: 20px;height: 20px;" value="${depart.name}" class="ids" onclick="checkboxOnclick()"> 
                <input type="checkbox" id="check" name=""  style="display:none" type="hidden" value="${depart.name}" class="departNames" checked="checked"> 
              </th>
              <td>${depart.name}</td>
            </tr>
          </c:forEach>
          </tbody>
        </table>
      </div>
      <div class="rightbody">
        <div class="rightbodybt">
          <div class="layui-input-inline">
            <select name="province" lay-filter="province" id="yearTermId">
              <option value="">选择学年</option>
                     <c:forEach items="${yearList}" var="year">
                    	<option value="${year }">${year }</option>
                    </c:forEach>  
            </select>
          </div>
        各系数据比较
        </div>
        <div class="chartbody">
        <div class="rone">
			<div id="bjclubnum" style="width: 100%;height:300px;margin-bottom:10px;float: left;"></div>  
			<div id="bjlc" style="width: 100%;height:300px;margin-bottom:10px; float: left;"></div>      
        </div>
          <div class="rtwo">      
          	 
            <div id="bjtc" style="width: 100%;height:300px;margin-bottom:10px; margin-left: 20px;"></div>      
          </div>
        </div>
      </div>
    </div>
<script type="text/javascript" src="<%=request.getContextPath()%>/static/js/jquery.js"></script>
    <script>
      var bjclubnum = echarts.init(document.getElementById('bjclubnum'));
      var bjlc = echarts.init(document.getElementById('bjlc'));
      var bjtc = echarts.init(document.getElementById('bjtc'));
/*       bjclubnum.setOption({
          title : {
              text: '各系活动人数',
               x:'center'
          },
          tooltip : {
              trigger: 'axis'
          },
          color:['red', 'green','yellow','blueviolet'],
          grid:{
              x:40,
              y:40,
              x2:70,
              borderWidth:1
          },
		dataZoom: [
		    {
		        show: true,
		        realtime: true,
		        start: 0,
		        end: 100,
		    },
		    {
		        type: 'inside',
		        realtime: true,
		        start: 30,
		        end: 70,
		    }
		],
           legend: {
            orient:'vertical',
            x2:5,
          }, 
          calculable : true,
          xAxis : [
              {
                  type : 'category',
              }
          ],
          yAxis : [
              {
                  type : 'value',
                  name:'人数',
              }
          ],
          series : []
      }    
          ); */

	bjlc.setOption({
	          title : {
	              text: '活动总里程',
	               x:'center'
	          },
	          tooltip : {
	              trigger: 'axis'
	          },
	          color:['#28495a', '#9bcd38','#fbc80b','#ee5a14','#353537'],
	          grid:{
	              x:40,
	              y:40,
	              x2:70,
	              borderWidth:1
	          },
	          legend: {
	            orient:'vertical',
	            x2:5,
	          },
	          calculable : true,
	          xAxis : [
	              {
	                  type : 'category',
	              }
	          ],
	          yAxis : [
	              {
	                  type : 'value',
	                  name:'总里程',
	              }
	          ],
	          series : []
	      }    
	          );

		bjtc.setOption({
		          title : {
		              text: '各系体测数据',
		               x:'center'
		          },   
		          legend: {
		            orient: 'vertical',
		            x:'right',
		          },          
		          tooltip : {
		              trigger: 'axis'
		          },
		          color:['#28495a', '#9bcd38','#fbc80b','#ee5a14','#353537'],
		          grid:{
		              x:40,
		              y:40,
		              x2:70,
		              borderWidth:1
		          },
					dataZoom: [
					    {
					        show: true,
					        realtime: true,
					        start: 0,
					        end: 100,
					    },
					    {
					        type: 'inside',
					        realtime: true,
					        start: 30,
					        end: 70,
					    }
					],
		          legend: {
		            x:80,
		          },
		          calculable : true,
		          xAxis : [
		              {
		                  type : 'category',
		                  data : [],
		              }
		          ],
		          yAxis : [
		              {
		                  type : 'value',
		                  name:'人数',
		              }
		          ],
		          series : [
		          ]
		      }    
		          ); 	             
	/* 各系活动人数数据 */
/*     bjclubnum.setOption(
    	      {
    	        xAxis : [
    	            {
    	                data : ['计科系','艺术系','化工系'],
    	            }
    	        ],
    	        series : [
    	            {
    	                name:'俱乐部',
    	                type:'bar',
    	                data:[50,30,20],
    	            },
    	            {
    	                name:'晨跑',
    	                type:'bar',
    	                data:[50,30,20],
    	            },
    	            {
    	                name:'健步',
    	                type:'bar',
    	                data:[50,30,20],
    	            }
    	        ]
    	      }    
    	    );  */
	/* 活动总里程数据 */
	bjlc.setOption(
		      {
		        xAxis : [
		            {
		                data : ['计科系','艺术系','化工系'],
		            }
		        ],
		        series : [
		            {
		                name:'晨跑',
		                type:'bar',
		                data:[50,30,20],
		            },
		            {
		                name:'健步',
		                type:'bar',
		                data:[50,30,20],
		            }
		        ]
	 }); 
	bjtc.showLoading();
    function bjtcData(year,departNames){
    	$.ajax({ 
            type: "get", 
            data :{"year":year,"departNames":departNames},
            dataType: "json", 
            url:"<%=request.getContextPath()%>/stamina/getLevelNumByYear",
            success: function(json) {
            	var bjtcXName=[];
            	var bjtcN=new Array();
            	var bjtcV=new Array();
            	var bjtcSeries=[];            	
            	for(var i=0;i<json.length;i++){
            		bjtcXName[i]=json[i].name;	
            	}
            	bjtcN[0]="不及格";
            	bjtcN[1]="及格";
            	bjtcN[2]="良好";
            	bjtcN[3]="优秀";
        		for(var j=0;j<4;j++){  
        			bjtcV[j]=new Array();
        			for(var i=0;i<json.length;i++){
        				if(j==0){
            				bjtcV[j][i]=json[i].failNum;        					
        				}
        				if(j==1){
            				bjtcV[j][i]=json[i].passNum;        					
        				}
        				if(j==2){
            				bjtcV[j][i]=json[i].goodNum;        					
        				}
        				if(j==3){
            				bjtcV[j][i]=json[i].excellentNum;        					
        				}
        			}
        		}
        		for(var j=0;j<4;j++){  
        			bjtcSeries.push({
	                    name: bjtcN[j],
	                    type: 'bar',
	                    data: bjtcV[j]
	                });
        		}
        		bjtc.hideLoading();
            	bjtc.setOption({
                    xAxis : [
                        {
                            data :bjtcXName,
                        }
                    ],
                    series:bjtcSeries,
                });	
            },
            error:function(data){
	            layer.alert('数据访问出错',{
	                icon:5});
            }
        });      	
    }
    bjtcData();//加载直接获取clubs数据
    $("#yearTermId").change(function(){//change事件加载直接获取clubs数据
		var idChecks = $(".ids:checked");
		var id = "";
		for (var i = 0; i < idChecks.length; i++) {
			id += idChecks[i].value + ",";
		}
		id = id.substring(0, id.length - 1);
    	yearTermId=$("#yearTermId").val();
    	bjtcData(yearTermId.substr(0, 4),id);
    	bjclubnumData(yearTermId.substr(0, 4),id);
	});
    
	function checkboxOnclick(){
		var idChecks = $(".ids:checked");
		var id = "";
		for (var i = 0; i < idChecks.length; i++) {
			id += idChecks[i].value + ",";
		}
		id = id.substring(0, id.length - 1);
		yearTermId=$("#yearTermId").val();
		bjtcData(yearTermId.substr(0, 4),id);		
		bjclubnumData(yearTermId.substr(0, 4),id);
	} 
	/* 各系体测数据 */
/* 	bjtc.setOption({
        xAxis : [
            {
                data :[1,2,3],
            }
        ],
        series : [
            { 
                name:'不及格',
                type:'bar',
                data:[50,30,20],
            },
            { 
                name:'及格',
                type:'bar',
                data:[30,60,90],
            },
            { 
                name:'良好',
                type:'bar',
                data:[30,60,90],
            },
            {
                name:'优秀',
                type:'bar',
                data:[30,60,90],
            }
        ]
    }    
        ); */ 
        
        
        bjclubnum.setOption({
            title : {
                text: '各系活动人数',
                 x:'center'
            },
            tooltip : {
                trigger: 'axis'
            },
            color:['#fbc80b','#ee5a14','#353537'],
            grid:{
                x:40,
                y:40,
                x2:70,
                borderWidth:1
            },
            legend: {
                x:70,
                y:5,
            },
            dataZoom: [
                {
                    show: true,
                    realtime: true,
                    start: 0,
                    end: 100,
                },
                {
                    type: 'inside',
                    realtime: true,
                    start: 30,
                    end: 70,
                }
            ],
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : [],
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    name:'人数',
                }
            ],
            series : []
        }    
            );
		bjclubnum.showLoading();
	    function bjclubnumData(year,departName){
	    	
	    	if(departName==null||departName==''){
				var departNameChecks = $(".departNames:checked");
				var departName = "";
				for (var i = 0; i < departNameChecks.length; i++) {
					departName += departNameChecks[i].value + ",";
				}	  
				departName = departName.substring(0, departName.length - 1);	 
	    	}
	    	$.ajax({ 
	            type: "get", 
	            data :{"year":year,"departList":departName},
	            dataType: "json", 
	            url:"<%=request.getContextPath()%>/platform/getDataComparisons",
	            success: function(json) {
	            	var arr=json["data"];
	                var bjclubnumseries=[];
	                var bjclubnumdataval=new Array();
	                var bjclubnumdataname=new Array();
	                for(var i = 0;i<arr.length;i++){
	                	bjclubnumdataval[i]=new Array();
	                   for(j=0;j<arr[i].items.length;j++){
	                	   bjclubnumdataval[i][j]=arr[i].items[j].value;
	                	   bjclubnumdataname[j]=arr[i].items[j].name;
	                    }
	                    /* console.log(clubsnumdataname); */
	                    bjclubnumseries.push({
	                        name: arr[i].name,
	                        type: 'bar',
	    					markPoint : {
	    					    data : [
	    					        {type : 'max', name: '最大值'},
	    					        {type : 'min', name: '最小值'}
	    					    ]
	    					},
	    					markLine : {
	    					    data : [
	    					        {type : 'average', name: '平均值'}
	    					    ]
	    					},
	                        // data:[120, 132, 101, 134, 90, 230, 210]
	                        data: bjclubnumdataval[i]
	                    });
	                }
	                /* console.log(clubsnumseries);   */
	            	/*xxx学年各俱乐部会员人数分布图数据 */
	            	bjclubnum.hideLoading();
	            	bjclubnum.setOption({
	            	 xAxis : [
	            	     {
	            	         data : bjclubnumdataname
	            	     }
	            	 ],
	            	 series :bjclubnumseries
	            	});
	            },
	            error:function(json){
		            layer.alert('数据访问出错',{
		                icon:5});
	            }
	        });   	
	    }		
	    bjclubnumData();
 
    </script>
  </body>

</html>